<template>
  <div class="negotiation-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>协商管理</h2>
      <p class="subtitle">管理您与广告主的广告协商</p>
    </div>

    <!-- 协商列表 -->
    <el-card shadow="never" class="negotiation-list-card">
      <template #header>
        <div class="card-header">
          <span>协商列表</span>
          <div class="filter-actions">
            <el-select v-model="filterStatus" placeholder="协商状态" clearable @change="handleFilterChange" style="width: 180px">
              <el-option label="全部" value="" />
              <el-option label="进行中" value="0" />
              <el-option label="已完成" value="1" />
              <el-option label="已取消" value="2" />
            </el-select>
            <el-select v-model="filterDevice" placeholder="选择设备" clearable @change="handleFilterChange" style="width: 180px">
              <el-option
                v-for="device in deviceList"
                :key="device.id"
                :label="device.name"
                :value="device.id"
              />
            </el-select>
          </div>
        </div>
      </template>
      
      <div class="negotiation-list" v-loading="loading">
        <el-empty description="暂无协商记录" v-if="negotiationList.length === 0 && !loading" />
        
        <div
          v-for="negotiation in negotiationList"
          :key="negotiation.id"
          class="negotiation-item"
          :class="{ 'active': currentNegotiation && currentNegotiation.id === negotiation.id }"
          @click="selectNegotiation(negotiation)"
        >
          <div class="item-header">
            <span class="ad-title">{{ negotiation.advertisementName }}</span>
            <el-tag :type="getNegotiationStatusType(negotiation.status)" size="small">
              {{ getNegotiationStatusText(negotiation.status) }}
            </el-tag>
          </div>
          
          <div class="item-price">
            <el-icon><Money /></el-icon>
            协商价格: <span class="price-amount">¥{{ negotiation.price.toFixed(2) }}</span>
          </div>
          
          <div class="item-time">
            <el-icon><Clock /></el-icon>
            {{ formatDateTime(negotiation.createdTime) }}
          </div>
          
          <div class="item-parties">
            <span class="party-name">广告主: {{ negotiation.advertiserName }}</span>
          </div>
          
          <div class="item-footer">
            <div class="unread-badge" v-if="getUnreadCount(negotiation.id) > 0">
              {{ getUnreadCount(negotiation.id) }}
            </div>
            <div class="action-buttons">
              <el-button
                v-if="negotiation.status === 0" 
                type="success"
                size="small"
                @click.stop="createSchedule(negotiation)"
              >
                <el-icon><Calendar /></el-icon> 创建排期
              </el-button>
              <el-button
                v-if="negotiation.hasSchedule" 
                type="info"
                size="small"
                @click.stop="viewSchedule(negotiation)"
              >
                <el-icon><Calendar /></el-icon> 查看排期
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click.stop="openChat(negotiation)"
              >
                <el-icon><ChatDotRound /></el-icon> 聊天
              </el-button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50]"
          :layout="'total, sizes, prev, pager, next'"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 协商详情 -->
    <el-card v-if="currentNegotiation" shadow="never" class="negotiation-detail-card">
      <template #header>
        <div class="card-header">
          <div class="header-title">
            <span>协商详情</span>
            <el-tag :type="getNegotiationStatusType(currentNegotiation.status)">
              {{ getNegotiationStatusText(currentNegotiation.status) }}
            </el-tag>
          </div>
          <div class="header-actions">
            <el-button
              v-if="currentNegotiation.status === 0 && currentNegotiation.hasSchedule"
              type="success"
              @click="completeNegotiation"
            >
              完成协商
            </el-button>
            <el-button
              v-if="currentNegotiation.status === 0"
              type="danger"
              @click="cancelNegotiation"
            >
              取消协商
            </el-button>
            <el-button
              v-if="currentNegotiation.status === 0"
              type="primary"
              @click="updateNegotiation"
            >
              更新协商
            </el-button>
            <el-button
              v-if="currentNegotiation.status === 0"
              type="success"
              @click="createSchedule(currentNegotiation)"
            >
              <el-icon><Calendar /></el-icon> 创建排期
            </el-button>
            <el-button
              v-if="currentNegotiation.hasSchedule"
              type="info"
              @click="viewSchedule(currentNegotiation)"
            >
              <el-icon><Calendar /></el-icon> 查看排期
            </el-button>
            <el-button type="primary" @click="openChat(currentNegotiation)">
              <el-icon><ChatDotRound /></el-icon> 聊天
            </el-button>
          </div>
        </div>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="协商ID" :span="2">{{ currentNegotiation.id }}</el-descriptions-item>
        <el-descriptions-item label="广告名称" :span="2">{{ currentNegotiation.advertisementName }}</el-descriptions-item>
        <el-descriptions-item label="广告主">{{ currentNegotiation.advertiserName }}</el-descriptions-item>
        <el-descriptions-item label="协商价格">
          <span class="price-amount">¥{{ currentNegotiation.price.toFixed(2) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="协商时间">{{ formatDateTime(currentNegotiation.createdTime) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatDateTime(currentNegotiation.updatedTime) }}</el-descriptions-item>
        <el-descriptions-item label="播放时段" :span="2">
          <div v-for="(slot, index) in currentNegotiation.timeSlots" :key="index" class="time-slot">
            {{ slot.startTime }} - {{ slot.endTime }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="协商内容" :span="2">
          <div class="negotiation-content">{{ currentNegotiation.content }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="排期状态" :span="2">
          <el-tag type="success" v-if="currentNegotiation.hasSchedule">已创建排期</el-tag>
          <el-tag type="warning" v-else>未创建排期</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      
      <div v-if="currentNegotiation.status === 0 && !currentNegotiation.hasSchedule" class="schedule-notice">
        <el-alert
          type="warning"
          show-icon
          :closable="false"
          title="完成协商需先创建排期"
          description="请先为此协商创建排期，创建完成后才能完成协商"
        />
      </div>
    </el-card>

    <!-- 协商更新对话框 -->
    <el-dialog v-model="updateDialogVisible" title="更新协商信息" width="500px">
      <el-form :model="updateForm" :rules="negotiateRules" ref="updateFormRef" label-width="100px">
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="updateForm.price" :min="0.01" :precision="2" style="width: 100%" />
        </el-form-item>
        
        <el-form-item label="播放时段" prop="timeSlots">
          <div v-for="(slot, index) in updateForm.timeSlots" :key="index" class="time-slot-item">
            <el-time-picker
              v-model="slot.startTime"
              format="HH:mm"
              placeholder="开始时间"
              style="width: 45%"
            />
            <span class="time-separator">至</span>
            <el-time-picker
              v-model="slot.endTime"
              format="HH:mm"
              placeholder="结束时间"
              style="width: 45%"
            />
            <el-button 
              v-if="index > 0" 
              type="danger" 
              circle 
              size="small" 
              @click="removeUpdateTimeSlot(index)" 
              class="remove-time-slot"
            >
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
          <div class="add-time-slot">
            <el-button type="primary" link @click="addUpdateTimeSlot">
              <el-icon><Plus /></el-icon>
              添加时段
            </el-button>
          </div>
        </el-form-item>
        
        <el-form-item label="协商内容" prop="content">
          <el-input
            v-model="updateForm.content"
            type="textarea"
            :rows="3"
            placeholder="请输入协商内容..."
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUpdateNegotiation">提交更新</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed,nextTick } from 'vue';

import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  Money, Clock, ChatDotRound, Delete, Plus, Calendar
} from '@element-plus/icons-vue';
import { 
  getNegotiationList, 
  getNegotiationDetail, 
  completeNegotiation as apiCompleteNegotiation,
  cancelNegotiation as apiCancelNegotiation,
  updateNegotiation as apiUpdateNegotiation
} from '@/api/negotiation';
import { getDeviceList } from '@/api/device';
import { checkNegotiationHasSchedule } from '@/api/schedule';

// 路由
const router = useRouter();

const currentUserId = ref(JSON.parse(localStorage.getItem('user'))?.id || 0);

// 状态变量
const loading = ref(false);
const negotiationList = ref([]);
const deviceList = ref([]);
const currentNegotiation = ref(null);
const filterStatus = ref('');
const filterDevice = ref('');
const updateDialogVisible = ref(false);
const unreadCounts = reactive({});
const updateFormRef = ref(null);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
});

// 协商更新表单
const updateForm = reactive({
  price: 0,
  timeSlots: [{ startTime: '08:00', endTime: '20:00' }],
  content: ''
});

// 表单规则
const negotiateRules = {
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '价格必须大于0', trigger: 'blur' }
  ],
  timeSlots: [
    { required: true, message: '请至少添加一个时间段', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入协商内容', trigger: 'blur' }
  ]
};

// 初始化数据
onMounted(() => {
  fetchNegotiationList();
  fetchDeviceList();
  
  // 从localStorage加载未读消息计数
  const savedCounts = localStorage.getItem('unreadCounts');
  if (savedCounts) {
    Object.assign(unreadCounts, JSON.parse(savedCounts));
  }
});

// 获取协商列表
const fetchNegotiationList = async () => {
  loading.value = true;
  try {
    const params = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      deviceId: filterDevice.value || null,
      status: filterStatus.value || null
    };
    
    console.info('请求协商列表参数:', params)
    const res = await getNegotiationList(params);
    console.log('协商列表响应:11', res);
    if (res.data.code === 200) {
      const negotiations = res.data.data.records || [];
      
      // 查询每个协商是否已创建排期
      for (const negotiation of negotiations) {
        try {
          const scheduleRes = await checkNegotiationHasSchedule(negotiation.id);
          negotiation.hasSchedule = scheduleRes.data.data;
        } catch (err) {
          console.error('检查排期状态失败:', err);
          negotiation.hasSchedule = false;
        }
      }
      
      negotiationList.value = negotiations;
      pagination.total = res.data.data.total || 0;
      
      // 如果有协商记录且没有选中的协商，默认选中第一个，但不滚动
      if (negotiationList.value.length > 0 && !currentNegotiation.value) {
        // 调用一个不滚动的版本来选中第一个协商
        selectNegotiationWithoutScroll(negotiationList.value[0]);
      }
    } else {
      ElMessage.error(res.data.message || '获取协商列表失败');
    }
  } catch (error) {
    console.error('获取协商列表异常:', error);
    ElMessage.error('获取协商列表失败');
  } finally {
    loading.value = false;
  }
};

// 不滚动的协商选择方法（用于初始化）
const selectNegotiationWithoutScroll = async (negotiation) => {
  try {
    const res = await getNegotiationDetail(negotiation.id);

    if (res.data.code === 200) {
      const negotiationDetail = res.data.data;
      
      // 检查是否已创建排期
      try {
        const scheduleRes = await checkNegotiationHasSchedule(negotiationDetail.id);
        negotiationDetail.hasSchedule = scheduleRes.data.data;
      } catch (err) {
        console.error('检查排期状态失败:', err);
        negotiationDetail.hasSchedule = false;
      }
      
      currentNegotiation.value = negotiationDetail;
      // 不进行滚动操作
    } else {
      ElMessage.error(res.data.message || '获取协商详情失败');
    }
  } catch (error) {
    console.error('获取协商详情异常:', error);
    ElMessage.error('获取协商详情失败');
  }
};

// 获取设备列表
const fetchDeviceList = async () => {
     const params = {
      pageNum: 1,
      pageSize: 100,
    };
  try {
    const res = await getDeviceList(params);
    if (res.data.code === 200) {
      deviceList.value = res.data.data.records || [];
    }
  } catch (error) {
    console.error('获取设备列表异常:', error);
  }
};

// 选择协商
const selectNegotiation = async (negotiation) => {
  try {
    const res = await getNegotiationDetail(negotiation.id);

    if (res.data.code === 200) {
      const negotiationDetail = res.data.data;
      
      // 检查是否已创建排期
      try {
        const scheduleRes = await checkNegotiationHasSchedule(negotiationDetail.id);
        negotiationDetail.hasSchedule = scheduleRes.data.data;
      } catch (err) {
        console.error('检查排期状态失败:', err);
        negotiationDetail.hasSchedule = false;
      }
      
      currentNegotiation.value = negotiationDetail;
      
      // 使用 nextTick 确保 DOM 更新后再滚动
      nextTick(() => {
        // 获取协商详情卡片元素
        const detailCard = document.querySelector('.negotiation-detail-card');
        if (detailCard) {
          // 平滑滚动到详情卡片
          detailCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    } else {
      ElMessage.error(res.data.message || '获取协商详情失败');
    }
  } catch (error) {
    console.error('获取协商详情异常:', error);
    ElMessage.error('获取协商详情失败');
  }
};

// 创建排期
const createSchedule = (negotiation) => {
  // 检查协商状态是否为进行中
  if (negotiation.status !== 0) {
    ElMessage.warning('只有进行中的协商才能创建排期');
    return;
  }
  
  // 检查是否已创建排期
  if (negotiation.hasSchedule) {
    ElMessage.warning('该协商已创建排期');
    return;
  }
  
  // 跳转到创建排期页面，并传递协商ID
  router.push({
    name: 'CreateSchedule',
    params: { id: negotiation.id }
  });
};

// 查看排期
const viewSchedule = (negotiation) => {
  // 先选中当前协商，确保详情显示
  selectNegotiation(negotiation);
  
  // 使用 nextTick 确保 DOM 更新后再滚动
  nextTick(() => {
    // 获取协商详情卡片元素
    const detailCard = document.querySelector('.negotiation-detail-card');
    if (detailCard) {
      // 平滑滚动到详情卡片
      detailCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
  
  // 跳转到排期详情页面
  router.push({
    name: 'ScheduleDetail',
    params: { advertisementId: negotiation.advertisementId }
  });
};

// 完成协商
const completeNegotiation = () => {
  // 检查是否已创建排期
  if (!currentNegotiation.value.hasSchedule) {
    ElMessage.warning('请先创建排期，然后再完成协商');
    return;
  }
  
  ElMessageBox.confirm('确定要完成此协商吗？完成后将无法进行修改。', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await apiCompleteNegotiation(currentNegotiation.value.id);
      if (res.data.code === 200) {
        ElMessage.success('协商已完成');
        // 更新协商状态
        await selectNegotiation(currentNegotiation.value);
        // 刷新列表
        fetchNegotiationList();
      } else {
        ElMessage.error(res.data.message || '完成协商失败');
      }
    } catch (error) {
      console.error('完成协商异常:', error);
      ElMessage.error('完成协商失败');
    }
  }).catch(() => {});
};

// 取消协商
const cancelNegotiation = () => {
  ElMessageBox.confirm('确定要取消此协商吗？取消后将无法恢复。', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await apiCancelNegotiation(currentNegotiation.value.id);
      if (res.data.code === 200) {
        ElMessage.success('协商已取消');
        // 更新协商状态
        await selectNegotiation(currentNegotiation.value);
        // 刷新列表
        fetchNegotiationList();
      } else {
        ElMessage.error(res.data.message || '取消协商失败');
      }
    } catch (error) {
      console.error('取消协商异常:', error);
      ElMessage.error('取消协商失败');
    }
  }).catch(() => {});
};

// 打开更新协商对话框
// 打开更新协商对话框
const updateNegotiation = () => {
  if (!currentNegotiation.value) {
    ElMessage.error('协商信息不存在');
    return;
  }
  
  updateForm.price = currentNegotiation.value.price;
  
  // 检查timeSlots是否为null或undefined
  if (!currentNegotiation.value.timeSlots) {
    console.warn('协商没有时间段信息，将使用默认值');
    updateForm.timeSlots = [
      {
        startTime: new Date(new Date().setHours(8, 0, 0, 0)),
        endTime: new Date(new Date().setHours(20, 0, 0, 0))
      }
    ];
  } else {
    // 深拷贝时间段数据，确保不直接修改原对象
    updateForm.timeSlots = currentNegotiation.value.timeSlots.map(slot => {
      // 如果是字符串格式，需要转换为时间对象
      let startTime = slot.startTime;
      let endTime = slot.endTime;
      
      if (typeof startTime === 'string') {
        const [hours, minutes] = startTime.split(':').map(Number);
        const date = new Date();
        date.setHours(hours, minutes, 0, 0);
        startTime = date;
      }
      
      if (typeof endTime === 'string') {
        const [hours, minutes] = endTime.split(':').map(Number);
        const date = new Date();
        date.setHours(hours, minutes, 0, 0);
        endTime = date;
      }
      
      return {
        startTime,
        endTime
      };
    });
  }
  
  updateForm.content = currentNegotiation.value.content || '';
  updateDialogVisible.value = true;
};
// 提交更新协商
const submitUpdateNegotiation = async () => {
  if (!updateFormRef.value) return;
  
  try {
    await updateFormRef.value.validate();
    
    const formattedTimeSlots = updateForm.timeSlots.map(slot => {
      // 如果时间是Date对象，转换为字符串格式 HH:MM
      const formatTimeString = (time) => {
        if (time instanceof Date) {
          return `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}`;
        }
        return time;
      };
      
      return {
        startTime: formatTimeString(slot.startTime),
        endTime: formatTimeString(slot.endTime)
      };
    });
    
    const data = {
      adId: currentNegotiation.value.adId,
      price: updateForm.price,
      timeSlots: formattedTimeSlots,
      content: updateForm.content
    };
    
    const res = await apiUpdateNegotiation(currentNegotiation.value.id, data);
    if (res.data.code === 200) {
      ElMessage.success('协商更新成功');
      updateDialogVisible.value = false;
      
      // 更新协商详情
      await selectNegotiation(currentNegotiation.value);
      // 刷新列表
      fetchNegotiationList();
    } else {
      ElMessage.error(res.data.message || '更新协商失败');
    }
  } catch (error) {
    console.error('更新协商异常:', error);
    ElMessage.error('更新协商失败: ' + (error.message || '未知错误'));
  }
};

// 添加更新时间段
const addUpdateTimeSlot = () => {
  const now = new Date();
  const startTime = new Date(now);
  startTime.setHours(8, 0, 0, 0);
  
  const endTime = new Date(now);
  endTime.setHours(20, 0, 0, 0);
  
  updateForm.timeSlots.push({
    startTime,
    endTime
  });
};

// 移除更新时间段
const removeUpdateTimeSlot = (index) => {
  updateForm.timeSlots.splice(index, 1);
};

// 打开聊天
const openChat = (negotiation) => {
  // 清除未读消息计数
  unreadCounts[negotiation.id] = 0;
  saveUnreadCounts();
  
  // 导航到聊天页面
  router.push({
    name: 'Chat',
    params: { id: negotiation.id }
  });
};

// 处理筛选变化
const handleFilterChange = () => {
  pagination.current = 1;
  fetchNegotiationList();
};

// 处理分页大小变更
const handleSizeChange = (size) => {
  pagination.pageSize = size;
  fetchNegotiationList();
};

// 处理分页页码变更
const handleCurrentChange = (page) => {
  pagination.current = page;
  fetchNegotiationList();
};

// 获取协商状态类型
const getNegotiationStatusType = (status) => {
  switch (Number(status)) {
    case 0: return 'primary';   // 进行中
    case 1: return 'success';   // 已完成
    case 2: return 'danger';    // 已取消
    default: return 'info';
  }
};

// 获取协商状态文本
const getNegotiationStatusText = (status) => {
  switch (Number(status)) {
    case 0: return '进行中';
    case 1: return '已完成';
    case 2: return '已取消';
    default: return '未知';
  }
};

// 获取未读消息数量
const getUnreadCount = (negotiationId) => {
  return unreadCounts[negotiationId] || 0;
};

// 保存未读消息计数到localStorage
const saveUnreadCounts = () => {
  localStorage.setItem('unreadCounts', JSON.stringify(unreadCounts));
};

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '未知';
  const date = new Date(dateTime);
  return date.toLocaleString();
};
</script>

<style scoped>
.negotiation-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.negotiation-list {
  min-height: 200px;
}

.negotiation-item {
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.negotiation-item:hover {
  border-color: #409EFF;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.negotiation-item.active {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ad-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.item-price, .item-time, .item-parties {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.item-price .el-icon, .item-time .el-icon {
  margin-right: 5px;
  color: #909399;
}

.price-amount {
  color: #f56c6c;
  font-weight: bold;
  margin-left: 4px;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.unread-badge {
  background-color: #f56c6c;
  color: white;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  padding: 0 6px;
}

.negotiation-detail-card {
  margin-top: 20px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.negotiation-content {
  white-space: pre-wrap;
  line-height: 1.5;
}

.time-slot {
  margin-bottom: 5px;
  display: inline-block;
  margin-right: 15px;
  border: 1px solid #EBEEF5;
  padding: 2px 8px;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.time-slot-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.time-separator {
  margin: 0 5px;
  color: #909399;
}

.remove-time-slot {
  margin-left: 10px;
}

.add-time-slot {
  margin-top: 10px;
}

.schedule-notice {
  margin-top: 20px;
  padding: 10px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-actions {
    margin-top: 10px;
    width: 100%;
  }
  
  .header-title {
    margin-bottom: 10px;
  }  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
  
  .action-buttons {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  
  .time-slot-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .time-separator {
    margin: 5px 0;
  }
  
  .remove-time-slot {
    margin-top: 5px;
    margin-left: 0;
    align-self: flex-end;
  }
  
  .el-dialog {
    width: 90% !important;
    max-width: 500px;
  }
}
</style>